<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
       
 <% String  now= request.getContextPath();
   
	String path= request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+now +"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta charset="utf-8">
  
  
	<title>人事申请</title>
	<link rel="stylesheet" type="text/css" href="<%=path%>/myoa/layui/css/layui.css" media="all">
  <script type="text/javascript"  src="<%=path%>/myoa/js/jquery-3.2.1.js"></script>
   <script src="<%=path%>/myoa/laydate/laydate.js"></script> 
	<script type="text/javascript" src="<%=path%>/myoa/layui/layui.js" ></script>
  <script src="<%=path%>/myoa/laydate/laydate.js"></script>
  <script type="text/javascript" src="<%=path%>/myoa/js/vue.js" ></script>
    <link href="<%=path%>/myoa/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <script src="<%=path%>/myoa/bootstrap/js/bootstrap.min.js"></script>
	
 
  <style type="text/css">
body{
  width:800px;
  margin:0px auto;
/*   margin-top:50px; */
}

#text{
  margin-left:80px;
}
#plane{
width:650px;
height:200px;
margin-left: 0px; 

}
</style>

<script>
/* //执行一个laydate实例
laydate.render({
  elem: '#date'
  ,type: 'datetime'
});
 */
//layui的from表单函数  
layui.use('form', function(){
  var form = layui.form;

 


});

</script>

</head>
<body>
<div id="bigData"><!--最外层容器  -->
<div align="center">
<button class="layui-btn layui-btn-lg layui-btn-normal" data-toggle="modal" data-target="#LookRules"  v-on:click="getDept()">新增</button>
<button class="layui-btn layui-btn-lg layui-btn-normal" data-toggle="modal" data-target="#search"  v-on:click="getDept()">查询</button>
</div>
<table class="layui-table  " lay-skin="line" id="showTable" style="table-layout:fixed;" >

  <thead>
   	 <tr>	
     <th  style="text-align: center;width:50px;height: 60px;">全选</th>
      <th  style="text-align: center;width:100px;height: 60px;">简介</th>
      <th  style="text-align: center;width: 100px;height:60px;">文件</th>
      <th  style="text-align: center;width: 100px;height:60px;">部门</th>
      <th  style="text-align: center;width: 100px;height:60px;">上传用户</th>
      <th style="text-align: center;width: 200px;height: 60px;">操作</th>
    </tr> 
  </thead>
  <tbody>
  
<!-- real_name,pa_id,pa_title,pa_context,pa_date,pa_startDate,pa_day,pa_status,pa_phone,pa_dept,pa_boss -->
     <tr id="showData" v-for=" rule in  allRules " >
      <td style="text-align: center;width:50px;height: 60px;"><input type="checkbox" name="checkbox" v-bind:value=rule.r_id  class="checkbox" align="center" ></input> </td>
      <td style="text-align: center;width: 100px;height: 60px;">{{rule.r_title}}</td>
      <td  class="layui-elip" style="text-align: center;width: 100px;height: 60px;"><a href="">{{rule.r_filename}}</a></td>
      <td style="text-align: center;width: 100px;height: 60px;">{{rule.r_dept}}</td>
      <td style="text-align: center;width: 100px;height: 60px;">{{rule.real_name}}</td>
   	  <td style="text-align: center;width: 200px;height: 60px;">
 	  <a class="layui-btn layui-btn-danger layui-btn-xs" v-on:click=deleteRules(rule.r_id) >删除</a>
 	 </td>
    </tr>
    <tr>
     <td  style="text-align:left;width:50px;height: 60px;">
      <button class="layui-btn layui-btn-sm layui-btn-primary" id="checkAll">全选</button>
	 </td>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	 <td style="text-align: center;width: 200px;height: 60px;">
 	 <a class="layui-btn layui-btn-danger layui-btn-xs" v-on:click="arrayDelete()">删除</a>
 	 </td>

	</tr>

  </tbody>
  <tfoot>
  
  </tfoot>
</table> 
<div>
<div id="demo0" align="right" style="margin-right: 120px;"  ></div> 
</div>












<!-- --------------------------------------------条件发布膜态框 ------------------------------------------------ -->

<div class="modal fade" id="LookRules"  role="dialog" aria-labelledby="text" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

<h4 class="modal-title" id="text" align="center">制度发布</h4>
</div>
<div class="modal-body">

    <form  id="addRules">
	<table   class="layui-table" lay-size="lg" style="text-align:center;" id="checkTable">
	<tr>
<td>简介</td>
<td><input type="text" name="r_title"   class="layui-input" ></td>
	</tr>
<tr>
<td>所属部门</td>
<td>
	<select name="r_dept"  style="width: 100px;" >
	 	<option  value="">  </option>
	 	<option v-for="dp in dept"  v-bind:value=dp.dept_name >{{dp.dept_name}}</option>
     </select></td>
</tr>
<tr>
<td>上传文件</td>
<td><input type="file" name="file"></td>
</tr>
<tr>
<td>提交</td>
<td> <input type="button" class="layui-btn" value="立即提交"  v-on:click="insertRules()" data-dismiss="modal"></input></td>
	
</tr>


		</table>

</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>

<div class="modal fade" id="LookRules"  role="dialog" aria-labelledby="text" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

<h4 class="modal-title" id="text" align="center">制度发布</h4>
</div>
<div class="modal-body">

    <form  id="addRules">
	<table   class="layui-table" lay-size="lg" style="text-align:center;" id="checkTable">
	<tr>
<td>简介</td>
<td><input type="text" name="r_title"   class="layui-input" ></td>
	</tr>
<tr>
<td>所属部门</td>
<td>
	<select name="r_dept"  style="width: 100px;" >
	 	<option  value="">  </option>
	 	<option v-for="dp in dept"  v-bind:value=dp.dept_name >{{dp.dept_name}}</option>
     </select></td>
</tr>
<tr>
<td>上传文件</td>
<td><input type="file" name="file"></td>
</tr>
<tr>
<td>提交</td>
<td> <input type="button" class="layui-btn" value="立即提交"  v-on:click="insertRules()" data-dismiss="modal"></input></td>
</tr>
</table>

</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>


	
	<!-- -------------------------------------------条件查询膜态框 ------------------------------------------------ -->

<div class="modal fade" id="search"  role="dialog" aria-labelledby="title" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

<h4 class="modal-title" id="title" align="center">条件查询</h4>
</div>
<div class="modal-body">

    <form  id="searchRules">
	<table   class="layui-table" lay-size="lg" style="text-align:center;" id="checkTable">
	<tr>
<td>简介</td>
<td><input type="text" name="r_title"   class="layui-input" ></td>
	</tr>
<tr>
<td>文件名</td>
<td><input type="text" name="r_filename"   class="layui-input" ></td>
	</tr>
<tr>
<td>上传人</td>
<td><input type="text" name="real_name"   class="layui-input" ></td>
	</tr>
<tr>
<td>上传日期</td>
<td><input type="text" name="r_date"  id="r_date"  class="layui-input" ></td>
	</tr>
<tr>
<td>所属部门</td>
<td>
	<select name="r_dept"  style="width: 100px;" >
	 	<option  value="">  </option>
	 	<option v-for="dp in dept"  v-bind:value=dp.dept_name >{{dp.dept_name}}</option>
     </select></td>
</tr>


<tr>
<td>提交</td>
<td> <input type="button" class="layui-btn" value="查询"  v-on:click="searchRules(1)" data-dismiss="modal"></input></td>
	
</tr>


		</table>

</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>

<div class="modal fade" id="LookRules"  role="dialog" aria-labelledby="text" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

<h4 class="modal-title" id="text" align="center">制度发布</h4>
</div>
<div class="modal-body">

    <form  id="addRules">
	<table   class="layui-table" lay-size="lg" style="text-align:center;" id="checkTable">
	<tr>
<td>简介</td>
<td><input type="text" name="r_title"   class="layui-input" ></td>
	</tr>
<tr>
<td>所属部门</td>
<td>
	<select name="r_dept"  style="width: 100px;" >
	 	<option  value="">  </option>
	 	<option v-for="dp in dept"  v-bind:value=dp.dept_name >{{dp.dept_name}}</option>
     </select></td>
</tr>
<tr>
<td>上传文件</td>
<td><input type="file" name="file"></td>
</tr>
<tr>
<td>提交</td>
<td> <input type="button" class="layui-btn" value="查询"  v-on:click="insertRules()" data-dismiss="modal"></input></td>
	
</tr>


		</table>

</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>




</div> <!--  最外层容器 -->
<script type="text/javascript">

	var form=new FormData();
    var  vue=new Vue({
    	el:'#bigData',
    	data:{
    		allRules:"",
    		dept:""
    	},
    	methods:{
    		getRules:function(curr){
    			$.ajax({
    			  url:"/OA/queryRules",
    			  data:{curr:curr},
    			  type:"post",
    			  dataType:"json",
    			  success:function(result){
    				  vue.allRules=result.rules;
    				  layui.use(['laypage', 'layer'], function(){
    					 	var laypage=layui.laypage;
    					 	var layer = layui.layer;
    					 	laypage.render({
    					 		elem:'demo0',
    					 		count:result.count,//
    					 		curr:curr,	
    					 		limit:2,
    					 		jump: function(obj, first){
    							
    					 		    //首次不执行
    					 		    if(!first){
    					 		    	vue.getRules(obj.curr);
    					 		    }
    					 		  }
    					 	})//render
  						
    				  }) //yayui 
    				  
    			  }
    				
    			})
    		
    		},//getRules
    		insertRules:function(){
    			//获取formdata对象
    			console.log("formdata");
    				 formData = new FormData($("#addRules")[0]);
    			$.ajax({
    				 url:"/OA/addRules",
    				 data:formData,
    				 type:'post',
    				 dataType:'text',
    				 processData: false,
      	             contentType: false,
      	           		cache:false,
    				 success:function(result){
    					 console.log("formdata2222");
    					 if(result==1){
    						 alert("新增成功");
    						 vue.getRules(1);
    					 }
    					 
    					 
    				 }
    				
    			})
    			
    		},
    		deleteRules:function(r_id){
    			$.ajax({
					 url:"/OA/deleteRules",
					 type:'post',
					 data:{r_id:r_id},
					 dataType:'json',			
			 		 success:function(result){
					 if(result==1){
						 alert("删除成功");
						 vue.getRules(1);
					 }
					 if(result==0){
						 alert("删除失败");
					 }
					
				 }	
			 
 			 })   	 
    			
    		},
    		  arrayDelete:function(){
    		    	/*   获取所有的选中的pa_id */
    		    	var array=new Array();
    		   	 $("input[name='checkbox']:checkbox:checked").each(function(index,val){ 
    		   		 array.splice(index,0,val.value); }) ;
    		   	 		$.ajax({
    					 url:"/OA/deleteArrayRules",
    				     data:{array:array},
    					 type:'post',
    					 dataType:'text',			
    					 success:function(result){
    						 if(result=="1"){
    							 alert("删除成功");
    						 }
    						 vue.getRules(1);//重新刷新界面 
    						 
    					 }
    					 
    		   		 })   	    	
    		    	
    		    },
    		
    		
   			 getDept:function(){
					$.ajax({
						 url:"/OA/queryAllDept",
						 type:'post',
						 dataType:'json',			
				 		 success:function(result){
						 vue.dept=result;
						
					 }	
				 
	  			 })   	 
			 },
			 
			 searchRules:function(curr){
				 var formData=new FormData();
				 if(curr=1){
					 formData = new FormData($("#searchRules")[0]);
					 form=formData;
					 formData.append("curr",curr);
				 }else{
					 formData=form;
					 formData.set("curr",curr);
				 }
				 
     			$.ajax({
     			  url:"/OA/queryRules",
     			  data:formData,
     			  type:"post",
     			  processData: false,
  	              contentType: false,
     			  dataType:"json",
     			  success:function(result){
     				  vue.allRules=result.rules;
     				  layui.use(['laypage', 'layer'], function(){
     					 	var laypage=layui.laypage;
     					 	var layer = layui.layer;
     					 	laypage.render({
     					 		elem:'demo0',
     					 		count:result.count,//
     					 		curr:curr,	
     					 		limit:2,
     					 		jump: function(obj, first){
     					 		    //首次不执行
     					 		    if(!first){
     					 		    	vue.searchRules(obj.curr);
     					 		    }
     					 		  }
     					 	})//render
   						
     				  }) //yayui 
     				  
     			  }
     				
     			})
     		
     		},
		 
    		
    		
    	}//methods 
    	
    	
    	
    	
    	
    })//最外层vue 

	window.onload=vue.getRules(1);
    
    $("#checkAll").click(function(){ 
		$("input[name='checkbox']").attr("checked","true");
		
	laydate.render({
			  elem: '#r_date'
			  ,type: 'datetime'
			});		
		
})	

</script>



</body>
</html>